{% extends 'plapp/base.html' %}

{% load appointment_tags %}
{% load pleft_tags %}
{% load i18n %}

{% block pagetitle%}{{appointment.get_metadata.title}} . {{settings.SITE_NAME}}{% endblock %}
{% block pageid %}appointment{% endblock %}

{% block scripts %}
  {% insert_script 'overview' %}
{% endblock %}

{% block main_script %}
  <script>pleft.overview.init()</script>
  {%for tool in tools%}{{tool.media}}{%endfor%}
{% endblock %}

{% block styles %}
  <link rel="stylesheet" href='/static/style/appointment.css'>
{% endblock %}

{% block title %}
  <h1>{% trans "Appointment overview" %}</h1>
{% endblock %}

{% block content %}
  <div id="overview-content">
    <div class="side-help">
      <p>{%trans "Use the buttons to indicate when you’re available. You can also enter comments."%}</p>
      <p>{%trans "View the availability of the other participants by clicking on their names or on the dates at the left side."%}</p>
    </div>
    <div class="appointment">
      <form action="set-availability/" method="POST">
                
      <div id="refresh">
        <a href="#" title='{%trans "Refresh this page."%}' class="bttn">{%trans "Refresh"%}</a>
      </div>
      <h2>{%trans "Appointment"%}</h2>
      <div id="app-description">{{appointment.get_metadata.description|safe}}</div>
      <table>
        <tr>
          <th colspan="2">{%trans "Proposed dates"%}</th>
          <th>{%trans "Participants"%}</th>
        </tr>
        <tr>
          <td id="dates">
            <ul class="select" id="dates">
              {%for date in appointment.Date_set%}
              <li><a href="?date={{date.id}}" title='{%trans "View availability for"%} {{date.datetime|date:"d M d, y"}}'
                  {%if date.id == selected%}id="selected"{%endif%} class="{{date.id}}">
                {{date.datetime|date:"d M d, H:i"}}
                <span class="bar 
                  {%if date.available%}available{%endif%} {%if date.unavailable%}unavailable{%endif%}"></span>
              </a></li>
              {%endfor%}
              </ul>
          </td>
          <td id="availability">
            <div id="arrow"> </div>
            {%if infotype == "availability"%}
              <table>
                <tr>
                  <th>{%trans "No"%}</th>
                  <th>{%trans "Maybe"%}</th>
                  <th>{%trans "Yes"%}</th>
                  <th>{%trans "Comments?"%}</th>
                </tr>
                {%for avail in info%}
                <tr class="{{avail.possible}}">
                  <td><input type="radio" name="{{for.count}}-avail" value="no" 
                    {%if avail.possible == "no"%}checked="checked"{%endif%} />{%trans "No"%}</td>
                  <td><input type="radio" name="{{for.count}}-avail" value="maybe" 
                    {%if avail.possible == "maybe"%}checked="checked"{%endif%} />{%trans "Maybe"%}</td>
                  <td><input type="radio" name="{{for.count}}-avail" value="yes"
                    {%if avail.possible == "yes"%}checked="checked"{%endif%} />{%trans "Yes"%}</td>
                  <td><textarea name="{{for.count}}-comment">{{avail.comment}}</textarea></td>
                </tr>
                {%endfor%}
              </table>
            {%else%}
            <ul id="balloons">
            {%for avail in info%}
              <li class="balloon">
                <div class="availability avail-{{avail.possible}}">
                  <span class="label-{{avail.possible}}">{%trans avail.possible%}</span>
                  <span class="comment">{{avail.comment}}</span>
                </div>
              </li>
            {%endfor%}
            </ul>
            {%endif%}
          </td>
          <td id="participants">
            <ul class="select" id="participants">
            {%for user in appointment.Invitee_set%}
              <li {%if user.id == selected%}id="selected"{%endif%}><a href="?part={{user.id}}" 
                title='{%trans "view availability for"%} {{user.get_name}}'>{{user.get_name}}</a></li>
            {%endfor%}
            </ul>
          </td>
        </tr>
      </table>
      <p id="save">
        <span id="save-button">
          <button type="submit">{%trans "Done"%}</button>
        </span>
        <span id="status">{%trans "Downloaded"%} {%now "H:i:s"%}</span>
      </p>
      </form>
      <div id="tools">
        {%for tool in tools%}
        <div id="{{tool.id}}">
          <h3>{%trans tool.title%}</h3>
          <form action="{{tool.target}}" method="POST">
          {%for field in tool%}
            {{field.label_tag}} {{field}}
          {%endfor%}
          <button type="submit">{%trans tool.submit%}</button>
          </form>
        </div>
        {%endfor%}
      </div>
    </div>
  </div>
{% endblock %}
